<template>
<div>
<Row class="task-banner-main" >
        <Col span="16" offset="4">   
        <Card  class="card_content">
        <Row>
          <Col span="11">
        <Row>
          <Col span="4">
          <img :src="project.logoSrc" style="height:54px;width:54px">
          </Col>
          <Col span="18" offset="2">
            <h1 class="h3-size">{{project.title}}</h1>
               <h1 class="h4-size">简介:{{project.desc}}</h1>
          </Col>
        </Row>
       </Col>
    <Col span="1">
   <Divider type="vertical" />
          </Col>
          <!-- 右边分割线-->
    <Col span="12">
      <Row type="flex" justify="center" align="middle"> 
        <Col span='20'>
        <p>报酬预计： 100元/人</p>
           <p>操作系统 Android</p>
              <p>任务截止日期： {{project.end_time}}</p>
        </Col>
        <Col span='4'>
        <Button type="info">立即报名</Button>
        </Col>
      </Row>
          </Col>
        </Row>
    </Card>
    </Col> 
    </Row>
    <!-- 报名 -->
    <Row class="baoming">
      <Col span="16" offset="4">
       <Card :bordered="false">
            <p slot="title">报名情况</p>
           <Row class="member-row" type="flex" justify="start" :gutter="20" >
           
              <Col span="3" class="user-list" v-for="(value,key) in project.user">   
                <Row class="user-avatar">
                    <Col>
                     <Tooltip  placement="right" theme='light'>
                  <Avatar :src="value.logoSrc" size="large" />
                  <div slot="content">
                    aaa
                  </div>
                     </Tooltip>
                    <p>{{value.name}}</p>
                       <Button shape="circle" size="small">入门</Button>
                    </Col>
                </Row>
              </Col>

           </Row>
        </Card>
      </Col>
    </Row>
</div>
</template>
    
<script>
export default {
    layout: 'gongce',
    async asyncData ({ params,query,$axios }) {
    let id=params.id

      let project = await $axios.$get('/api/project/detail/'+id)
      return {
        project: project.data,
      }
    },
   data() {
      return {//项目类型
        project:{},
      }
    },
      //设置header
    head () {
      return {
        title: this.project.title,
        meta: [
          { hid: '汇聚行业精英，提升软件质量', name: '汇聚行业精英，提升软件质量', content: '汇聚行业精英，提升软件质量' }
        ]
      }
    },

}
</script>
<style scope>
.task-banner-main{
  margin-top:30px;
}
.ivu-layout{
     background:none;
      position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.ivu-divider, .ivu-divider-vertical {
    margin: 0 8px;
    display: inline-block;
    height: 4em;
    width: 1px;
    vertical-align: middle;
    position: relative;
    top: -.06em;
}
.card_content{
  width:100%;
  padding: 14px;
}
body {
    background-color: #f0f0f0;
}
.baoming{
  margin-top: 20px
}
.member-row{
  padding: 20px 40px;
  background-color: #F7F7F7;
  border: 1px solid #EDEDED;
}
.user-list{
  background: #DFE2E6;
  background-clip:content-box;
  text-align: center;
  height: 153px;
  padding-bottom: 10px;
  padding-top:10px;

}
.user-avatar{
  margin-top:20px; 
}
</style>


